    <template>
    <div class="Setup">
         <headerTou title="设置 " :isfanhui=true ></headerTou>
         <div class="touxiang">
            <div class="left">头像</div>
            <div class="right">
                <img class="img1" src="../img/Rectangle@2x.png" alt="">
                 <img class="img2" src="../img/more.png" alt="">
            </div>
         </div>
       <div class="Myfoot">
           <div class="chang">
               <div class="changdiv">
             <span>登录账号</span>
             </div>
             <div class="changdivimg">
                 15105988598
             </div>
           </div>
            <div class="chang" @click="gaiming">
               <div class="changdiv">           
             <span>我的会员名称</span>
             </div>
             <div class="changdivimg">
              {{userName}}
                 <img src="../img/more.png" alt="">
             </div>
           </div>
            <div class="chang ">
               <div class="changdiv">
             <span>性别</span>
             </div>
             <div class="changdivimg" @click="genggai">
                 {{boy}}
                 <img src="../img/more.png" alt="">
             </div>
           </div>
         <div class="chang ">
               <div class="changdiv">
             <span>出生年月</span>
             </div>
             <div class="changdivimg" @click=" openPicker">
              {{DateBirthday}}
                 <img src="../img/more.png" alt="">
             </div>
           </div>
       </div>
      <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"  @confirm="handleConfirm()">
           </mt-datetime-picker>
    </div>
</template>
<script>
import headerTou from "./zujian/header.vue";
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      userName: "无生涯",
      boy: "男",
      pickerValue: "",
      DateBirthday: "2019-13-32"
    };
  },
  created() {},
  mounted() {},
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    handleConfirm() {
      if (this.pickerValue == "") {
        this.DateBirthday = "2008-01-01";
        return;
      }
      var y = this.pickerValue.getFullYear();
      var m = this.pickerValue.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = this.pickerValue.getDate();
      d = d < 10 ? "0" + d : d;
      this.DateBirthday = y + "-" + m + "-" + d;
    },
    genggai() {
      MessageBox.confirm("确定更改其性别?").then(action => {
        if (this.boy == "男") {
          this.boy = "女";
        } else {
          this.boy = "男";
        }
      });
    },
    gaiming() {
      MessageBox.prompt("请输入更改姓名（不得大于8位数或者小于两位）").then(
        ({ value, action }) => {
          console.log(value)
          if (value != null) {
            if (value.length <= 8 && value.length >= 2) {
              this.userName = value;
            } else {
              Toast("更改失败");
            }
          }
        }
      );
    }
  },
  components: {
    headerTou
  }
};
</script>
<style lang="scss" scoped>
.Setup {
  .touxiang {
    width: 690px;
    height: 76 * 2px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    border-bottom: 20px solid #e5e5e5;
    .left {
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #333333;
      line-height: 76 * 2px;
    }
    .right {
      display: flex;
      align-items: center;
      .img1 {
        border-radius: 4px;
        width: 48 * 2px;
        height: 48 * 2px;
        margin-right: 20px;
      }
      .img2 {
        width: 14 * 2px;
        height: 14 * 2px;
      }
    }
  }
  .ShopDetailsHeader {
    border-bottom: 20px solid #e5e5e5;
    height: 468px;
    width: 750px;
    position: relative;
    .UsePhoto {
      height: 468px;
      width: 500px;
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      img {
        height: 116px;
        width: 116px;
        border-radius: 50%;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }
      .store {
        text-align: center;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 100px;
        height: 32px;
        font-size: 32px;
        font-family: PingFangSC-Medium;
        color: #333333;
      }
    }
  }

  .chang {
    padding: 0 30px;
    width: 690px;
    height: 90px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    .changdiv {
      height: 90px;
      line-height: 90px;
      span {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #333333;
      }
      img {
        height: 56px;
        width: 56px;
        vertical-align: middle;
      }
    }
    .changdivimg {
      height: 90px;
      line-height: 90px;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #999999;
      img {
        height: 28px;
        width: 28px;
        vertical-align: middle;
      }
    }
  }
}
</style>

